<template>
  <div class="index_container">
    <div>
      <el-form inline :model="formData">
        <el-form-item prop="id">
          <el-select
            v-model="choice_id"
            multiple
            placeholder="请选择"
            class="input-100"
            @change="changeClick"
          >
            <el-option
              v-for="item in formListData"
              :key="item.id"
              :value="item.id"
              :label="item.username"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="time">
          <el-date-picker
            v-model="formData.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="changeClick" class="staff_btn">搜索</el-button>
        </el-form-item>
        <el-form-item prop="styleList">
          <el-select
            v-model="formData.list"
            placeholder="搜索后可过滤数据"
            class="input-100"
            clearable
            @change="changeSearch"
          >
            <el-option
              v-for="item in formData.styleList"
              :key="item"
              :value="item"
              :label="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-descriptions title=" " border>
        <el-descriptions-item :label="item[0]" v-for="(item,index) in style_price" :key="index">
          <el-tag type="success" size="small">{{ item[1] }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <myTabel
        stripe
        v-if="showMyTable"
        :columnData="columnData"
        :data="tableData"
      >
        <el-table-column label="结算情况" align="left" width="190px">
          <template slot-scope="scope">
<!--            <el-button type="primary" plain @click="giveYouMoney(scope.row)">-->
<!--              结算-->
<!--            </el-button>-->
            <el-tag type="success" v-if="scope.row.settlement == 'Settled'">已结算</el-tag>
            <el-tag type="danger" v-if="scope.row.settlement == 'Unsettled'">未结算</el-tag>
          </template>
        </el-table-column>
      </myTabel>

    </div>

  </div>
</template>

<script>
import {
  getUserId,
  getCalculateSalary,
} from "@/request/api/SalaryCalculation/salaryCalculation";
import myTabel from "@/components/myTable/index.vue";
import { statusText } from "@/utils/filter";
import { getLastWeekDate } from "@/utils/latelyTime";
import dayjs from "dayjs";
export default {
  components: { myTabel },
  data() {
    return {
      //最大为当天
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      isVisible: false,
      showMyTable: true,
      choice_id:[],
      statistics:[],
      style_price:[],
      formData: {
        id: "",
        time: [],
        styleList: "",
      },
      columnData: [
        {
          prop: "username",
          label: "员工名称",
          "min-width": "100",
        },
        {
          prop: "position",
          label: "部位",
          "min-width": "80",
        },
        {
          prop: "employee_id",
          label: "孔号",
          "min-width": "60",
        },
        {
          prop: "size",
          label: "尺码",
          "min-width": "60",
        },
        {
          prop: "quantity",
          label: "件数",
          "min-width": "60",
        },
        {
          prop: "wage",
          label: "价格",
          "min-width": "80",
        },
        {
          prop: "style_number",
          label: "款号",
          "min-width": "60",
        },
        {
          prop: "total_amount",
          label: "总金额",
          "min-width": "80",
        },
        {
          prop: "time",
          label: "时间",
          "min-width": "180",
        },
        {
          prop: "remark",
          label: "备注",
          "min-width": "80",
        },
        {
          prop: "status",
          label: "状态",
          "min-width": "80",
          render(h, row) {
            return h("div", {}, [
              h(
                "el-tag",
                {
                  class: {
                    "custom-tooltip": true,
                  },
                  props: {
                    type:
                      row.status === "Approved" ? "success" : ""
                      || row.status === "Rejected" ? "danger" : ""
                      || row.status === "Pending" ? "" : "",
                  },
                },

                statusText(row.status)
              ),
            ]);
          },
        },
        // {
        //   prop: "settlement",
        //   label: "结算",
        //   "min-width": "80",
        //   // settlementText
        //   render(h, row) {
        //     return h("div", {}, [
        //       h(
        //         "el-tag",
        //         {
        //           class: {
        //             "custom-tooltip": true,
        //           },
        //         },
        //
        //         settlementText(row.settlement)
        //       ),
        //     ]);
        //   },
        // },
      ],
      title: "",
      list: [],
      tableData: [],
      formListData: [],
    };
  },
  created() {
    // 默认时间
    this.formData.time = getLastWeekDate();
    this.getUserIdList();
  },

  methods: {

    // 获取工资计算列表数据
    async changeClick() {

      //获取当月
      const  start_time = this.formData.time[0]
      const  end_time = this.formData.time[1]


      // const start_time = "2023-11-01"
      // const end_time = "2023-11-08"
      // 可能因为组件渲染太快导致getUserIdList中数据还没来得及返回，导致在此方法中使用this.formListData为空字典 故在此处重新调用

      console.log("choice_id:",this.choice_id)
      const data = {
        start_time,
        end_time,
        id: this.choice_id.join(","),
      };
      getCalculateSalary(data).then((res) => {
        console.log("🚀 ~ file:SalaryCalculation method: line:246 -----res,data", res,data)
        this.tableData = res.data.data;
        this.list = res.data.data;
        this.formData.styleList = [
          ...new Set(res.data.data.map((item) => item.style_number)),
        ];

        let style_price = res.data.style_price
        let style_price_keys = Object.keys(style_price)
        console.log(style_price,style_price_keys)
        this.style_price = []
         style_price_keys.forEach( item => {
           this.style_price.push([ item , style_price[item] ])
        })


        console.log(this.style_price)



      });


    },
    // 获取用户列表
    getUserIdList() {
      getUserId().then((res) => {
        this.formListData = res.data;
      });
    },

    // 过滤列表数据
    changeSearch(val) {
      if (val.length !== 0) {
        this.tableData = this.list.filter((item) =>
          val.includes(item.style_number)
        );
      } else {
        this.changeClick();
      }
    },
  },
  mounted() {
    // this.choice_id  = (await getUserId()).data.map(item => item.id)
    // console.log("mounted_choice_id",this.choice_id)
    this.formData.time =[
      dayjs().startOf("month").format("YYYY-MM-DD"),
      dayjs().endOf("month").format("YYYY-MM-DD")
    ]
    this.changeClick()
  },
};
</script>

<style lang="scss">
.staff_title {
  font-size: 24px;
  font-weight: 500;
}
.el-form {
  height: 40px;
  line-height: 40px;
  .el-range-editor.el-input__inner {
    padding: 0 10px;
  }
  .input-100 {
    .el-input__inner {
      width: 350px;
    }
  }
}
.staff_btn {
  height: 32px;
  line-height: 10px;
}

.dialog_content {
  width: 400px;
  margin: 0 auto;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
